<script setup>
import {reactive, ref, onMounted} from 'vue'
import {studentUpdate, studentInfo} from "@/api/student";
import {useCommon} from '@/hooks/web/useCommon'
import {useRoute} from "vue-router";
import StudentVisit from "./component/StudentVisit.vue";
import Payment from "@/views/student-manage/component/Payment.vue";
import {usePermissions} from "@/hooks/web/usePermissions";
import {useStorage} from "@/hooks/web/useStorage";
const {setStorage} = useStorage()
const {isAdmin} = usePermissions()
const route = useRoute()
let payment = ref('')
let visitData = ref([])
let {
  studentForm,
  fetchDataBox,
  schoolOptions,
  degreeOptions,
  specialtyOptions,
  getTeacher,
  teacherOptions,
  optionsBox,
  gatherOptions,
  getChannel,
  onSourceChange
} = useCommon()

let visit = ref('')
let loading = ref(false)
let payLoading = ref(false)
let formList = reactive([
  {
    label: '', xs: 24, lg: 20, md: 24, children: [
      {
        list: 'school_id',
        link: 'school_list',
        type: 'select',
        label: '报考院校',
        xs: 24,
        lg: 5,
        md: 7,
        method: () => {
          fetchDataBox('project')
        }
      },
      {
        list: 'project_id',
        link: 'project_list',
        type: 'select',
        label: '报考项目',
        xs: 24,
        lg: 5,
        md: 7,
        method: () => {
          fetchDataBox('zy')
        }
      },
      {list: 'zy_id', link: 'zy_list', type: 'select', label: '报考专业', xs: 24, lg: 5, md: 7,},
      {list: 'created_time', type: 'datetime', label: '系统时间', format: 'YYYY-MM-DD HH:mm:ss', xs: 24, lg: 5, md: 7},
      {list: 'teacher_id', link: 'teacher_list', type: 'select', label: '招生老师', xs: 24, lg: 5, md: 7},
      {list: 'hezuoren', type: 'text', label: '合作人', xs: 24, lg: 5, md: 7},
      {list: '', type: '', label: '', xs: 24, lg: 5, md: 7},
      {list: '', type: '', label: '', xs: 24, lg: 5, md: 7}
    ]
  },
  {
    label: '学生基本信息', xs: 24, lg: 20, md: 24, children: [
      {list: 'realname', type: 'text', label: '学生姓名', xs: 24, lg: 5, md: 7},
      {list: 'sex', link: 'sex_list', type: 'select', label: '学生性别', xs: 24, lg: 5, md: 7},
      {list: 'idnum', type: 'text', label: '身份证号', xs: 24, lg: 5, md: 7},
      {list: 'laidian', type: 'text', label: '来电号码', xs: 18, lg: 4, md: 4},
      {list: 'weixin_name', type: 'text', label: '微信名', xs: 24, lg: 5, md: 7},
      {list: 'weixin', type: 'text', label: '微信号码', xs: 24, lg: 5, md: 7},
      {list: 'xueli', link: 'xueli_list', type: 'select', label: '当前学历', xs: 24, lg: 5, md: 7},
      {list: 'zhuanye', type: 'text', label: '当前专业', xs: 24, lg: 5, md: 7},
      {list: 'biye', type: 'text', label: '毕业学校', xs: 24, lg: 5, md: 7},
      {
        list: 'laiyuan', link: 'laiyuan_list', type: 'select', label: '学生来源', method: () => {
          onSourceChange(studentForm.laiyuan)
        }
      },
      {list: 'laiyuan_xiangqing', type: 'text', label: '来源详情', xs: 24, lg: 5, md: 7},
      {list: 'channel_id', link: 'channel_list', type: 'select', label: '客户机构', xs: 24, lg: 5, md: 7},
      {list: '', type: '', label: '', xs: 24, lg: 5, md: 7}
    ]
  },
  {
    label: '报考信息', xs: 24, lg: 20, md: 24, children: [
      {list: 'reg_date', link: 'register_list', type: 'select', label: '注册时间', xs: 24, lg: 5, md: 7},
      {list: 'yixiang', link: 'yixiang_list', type: 'select', label: '意向类型', xs: 24, lg: 5, md: 7},
      {list: 'status_id', link: 'status_list', type: 'select', label: '当前状态', xs: 24, lg: 5, md: 7},
      {list: '', type: '', label: '', xs: 24, lg: 5, md: 7},
    ]
  }
])

onMounted(() => {

  if (!isAdmin) {
    formList[0].children[3].type = 'txt'
  }
  setStorage(route.query.flag, '1')
  fetchDataBox('school')
  getTeacher()
  gatherOptions()
  fetchInfo()
  getChannel()

})
const fetchInfo = async () => {
  loading.value = true
  let res = await studentInfo({id: route.query.student_id})
  loading.value = false
  console.log(res);
  if (res) {
    studentForm = Object.assign(studentForm, res.data.student)
    let index = formList[1].children.findIndex(item => {
      return item.list === 'channel_id'
    })

    studentForm.laiyuan !== '渠道' ? formList[1].children[index].label = '' : formList[1].children[index].label = '客户机构'
    studentForm.sex_name = studentForm.sex === '1' ? '男' : '女'
    if (studentForm.idnum && !isAdmin) {
      formList[1].children[2].type = 'txt'
    }

    if (studentForm.laidian  && !isAdmin) {
      formList[1].children[3].type = 'txt'
    }

    visitData.value = res.data.visit

    //给回访信息子组件间回访时间赋值
    visit.value.visitTime.showTime = !studentForm.next_visit_time
    visit.value.visitTimeForm.next_visit_time = studentForm.next_visit_time

    console.log('visitTime',visit.value.visitTime)
    //如果缴费信息有数据在赋值,确保最少一条数据
    convertPay(res)
    //循环判断是否有值,没有值原始表单展示,有值则文字形式展示
    for (const resKey in studentForm) {
      studentForm[resKey] ? studentForm[resKey + '_form'] = false : studentForm[resKey + '_form'] = true
    }

    if (res.data.student.project_id) {
      fetchDataBox('project')
      fetchDataBox('zy')
    }
  }
}

const convertPay = (res) => {
  payment.value.tableData.splice(0)
  if (res.data.pay.length) {
    res.data.pay.forEach(item => {
      switch (item.confirm) {
        case '1':
          item.confirm_txt = '已通过'
          break
        case '2':
          item.confirm_txt = '已驳回'
          break
        default:
          item.confirm_txt = '审批中'
      }
    })
    payment.value.tableData.push(...res.data.pay)
  } else {
    payment.value.tableData.push(
        {
          name: '',
          pay_status: '',
          pay_method: '',
          pay_date: '',
          confirm: '',
          remark: '',
          money: '', //缴费金额
          showForm: true,
          fileList: []
        }
    )
  }

}

const submitVisit = async () => {
  let res = await studentInfo({id: route.query.student_id})
  if (res) {
    visitData.value = res.data.visit
  }
}

const fetchPayData = async () => {
  payLoading.value = true
  let res = await studentInfo({id: route.query.student_id})
  payLoading.value = false
  if (res) {
    convertPay(res)
  }
}

/**
 * 单击文本触发
 * @param inputRef
 * @param textRef
 */
const textDblclick = (formItem) => {
  studentForm[formItem + '_form'] = true
  studentForm = Object.assign(studentForm, studentForm)
}

const studentEdit = async (value, type, txt) => {
  console.log(value);
  const data = studentForm
  data.student_id = route.query.student_id
  if (value === 'created_time') {
    data.created_change = 1
  } else if (value === 'school_id') {
    console.log(this.form.school_id)
    data.zy_id = ''
    data.project_id = ''
    studentForm.school_id_name = txt
    studentForm.school_id_form = false
    return ElMessage({message: '更换学校需重新选择报考项目才可修改!', type: 'warning'})

  } else if (value === 'project_id') {
    data.zy_id = ''
    studentForm.zy_id_name = ''
    studentForm.zy_id_form = true
    return ElMessage({message: '更换报考项目后报考专业将情况!', type: 'warning'})
  }
  loading.value = true
  const res = await studentUpdate(data)
  loading.value = false
  console.log('修改', res)
  if (res) {
    ElMessage({message: '修改成功!', type: 'success'})
    await fetchInfo()

  }
}


</script>
<template >
  <div v-loading="loading">
    <el-form style="margin-top: 30px;" label-position="left" label-width="80px" >
      <el-row justify="center">
        <el-col :lg="22" :xl="19" :xs="24" :md="24" :sm="24" class="box-wrap">
          <h3 style="text-align: center;color: #303133;">学生报名信息</h3>
          <el-col :span="24" v-for="value in formList">
            <!--          <el-divider content-position="left">{{ value.label }}</el-divider>-->

            <div class="student-label">{{ value.label }}</div>
            <el-row style="justify-content: space-between;">
              <el-col :lg="5" :xs="24" :md="7" v-for="(item,index) in value.children">
                <el-form-item
                    :key="index"
                    v-if="item.label"
                    :label="item.label"
                    :prop="item.list"
                >
                  <div style="width: 100%" v-show="studentForm[item.list+'_form']">
                    <el-input
                        v-if="item.type==='text'"
                        v-model="studentForm[item.list]"
                        type="text"
                        :placeholder="'请输入'+item.label"
                        @blur="studentEdit(item.list)"
                    />
                    <el-select
                        v-else-if="item.type==='select'"
                        v-model="studentForm[item.list]"
                        style="width: 100%"
                        @change="item.method ? item.method(studentForm[item.list]):''"
                        :placeholder="'请选择'+item.label"
                    >
                      <el-option
                          v-for="(item2,index2) in optionsBox[item.link]"
                          @click.native="studentEdit(item.list,'itemTxt',item2.name)"
                          :key="index2"
                          :label="item2.name"
                          :value="item2.value ?item2.value :item2.id"
                      />
                    </el-select>
                    <el-date-picker
                        v-else-if="item.type==='datetime'"
                        v-model="studentForm[item.list]"
                        type="datetime"
                        style="width: 100%"
                        placeholder="选择日期时间"
                        :format="item.format"
                        :value-format="item.format"
                        @change="studentEdit(item.list)"
                    />

                  </div>
                  <span style="color: red"
                        v-show="!studentForm[item.list+'_form'] && item.type !=='txt'"
                        @click="textDblclick(item.list)">
                        {{ studentForm[item.list + '_name'] || studentForm[item.list] }}
                    </span>
                  <div v-show="item.type==='txt' " style="color: #545454">
                    {{ studentForm[item.list + '_name'] || studentForm[item.list] }}
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </el-form>
    <!--  缴费组件-->
    <student-visit :visit-data="visitData" @submitVisit="submitVisit" ref="visit"></student-visit>
    <Payment ref="payment" @submitPayment="fetchPayData" v-loading="payLoading"></Payment>
  </div>
</template>

<style scoped>
@import "index.less";
</style>
